<template>
    <div class="eight wide column" style="margin-left: 0.3vw">
        <!--  卡片      -->
        <div v-for="(card,index) in articleList" :key="index">
            <template v-if="index%2==0">
                <ArticleCardLeft :card="card"></ArticleCardLeft>
            </template>
            <template v-else>
                <ArticleCardRight :card="card"></ArticleCardRight>
            </template>
        </div>
        <div class="ui " @click="isClick&addList()"
             style=" margin: 2vw;border-radius: 0.4vw; text-align: center;cursor: pointer">

            <p> {{ addMore }}</p>
            <transition name="fade">
                <svg v-show="addCircle" t="1617793390344" class="icon ad_more ad_circle" viewBox="0 0 1024 1024"
                     version="1.1"
                     xmlns="http://www.w3.org/2000/svg"
                     p-id="2107" width="15" height="15">
                    <path d="M511.504516 0C238.129548 0 16.516129 222.174968 16.516129 496.243613 16.516129 770.312258 238.129548 992.487226 511.504516 992.487226 784.879484 992.487226 1006.492903 770.312258 1006.492903 496.243613 1006.492903 222.174968 784.912516 0 511.504516 0L511.504516 0ZM511.504516 942.839742C265.447226 942.839742 65.998452 742.895484 65.998452 496.210581 65.998452 249.525677 265.447226 49.581419 511.504516 49.581419 757.561806 49.581419 957.010581 249.525677 957.010581 496.210581 957.010581 742.895484 757.561806 942.839742 511.504516 942.839742L511.504516 942.839742Z"
                          p-id="2108"></path>
                    <path d="M514.708645 281.963355C463.541677 281.963355 412.473806 301.815742 373.46271 341.520516 334.517677 381.192258 314.962581 433.251097 314.962581 485.243871 314.962581 537.236645 334.484645 589.295484 373.46271 628.967226 412.473806 668.672 463.541677 688.524387 514.708645 688.524387 565.809548 688.524387 616.877419 668.672 655.888516 628.967226 694.833548 589.295484 714.355613 537.236645 714.355613 485.243871 714.355613 433.251097 694.833548 381.192258 655.888516 341.520516 616.877419 301.815742 565.809548 281.963355 514.708645 281.963355L514.708645 281.963355ZM529.044645 329.562839C532.380903 316.944516 545.197419 309.380129 557.650581 312.782452 570.136774 316.184774 577.469935 329.199484 574.133677 341.850839 570.797419 354.535226 558.046968 362.099613 545.593806 358.69729 533.107613 355.294968 525.708387 342.280258 529.044645 329.562839L529.044645 329.562839ZM373.198452 546.617806C360.811355 550.053161 347.994839 542.554839 344.658581 529.870452 341.322323 517.186065 348.655484 504.138323 361.141677 500.736 373.627871 497.36671 386.411355 504.865032 389.747613 517.582452 393.083871 530.233806 385.684645 543.215484 373.198452 546.617806L373.198452 546.617806ZM389.615484 392.291097C380.498581 383.009032 380.498581 367.979355 389.615484 358.69729 398.765419 349.415226 413.497806 349.415226 422.61471 358.69729 431.698581 367.979355 431.698581 383.009032 422.61471 392.291097 413.497806 401.606194 398.732387 401.606194 389.615484 392.291097L389.615484 392.291097ZM496.309677 638.282323C492.973419 650.900645 480.156903 658.465032 467.769806 655.06271 455.283613 651.660387 447.884387 638.645677 451.220645 625.994323 454.556903 613.309935 467.373419 605.745548 479.826581 609.147871 492.24671 612.550194 499.645935 625.564903 496.309677 638.282323L496.309677 638.282323ZM444.085677 553.818839C406.197677 515.171097 406.197677 452.674065 444.085677 414.092387 481.973677 375.543742 543.44671 375.543742 581.33471 414.092387 619.22271 452.674065 619.22271 515.204129 581.33471 553.818839 543.44671 592.367484 481.973677 592.367484 444.085677 553.818839L444.085677 553.818839ZM635.837935 609.147871C626.688 618.396903 611.889548 618.396903 602.83871 609.147871 593.721806 599.865806 593.721806 584.803097 602.83871 575.554065 611.922581 566.238968 626.721032 566.238968 635.837935 575.554065 644.888774 584.803097 644.888774 599.832774 635.837935 609.147871L635.837935 609.147871ZM680.761806 437.97471C684.098065 450.692129 676.698839 463.706839 664.212645 467.109161 651.825548 470.478452 639.009032 462.980129 635.672774 450.26271 632.336516 437.611355 639.735742 424.563613 652.155871 421.16129 664.642065 417.825032 677.425548 425.290323 680.761806 437.97471L680.761806 437.97471Z"
                          p-id="2109"></path>
                    <path d="M210.085161 197.400774 231.754323 339.406452 268.354065 333.724903 246.684903 191.686194 210.085161 197.400774Z"
                          p-id="2110"></path>
                    <path d="M398.005677 863.793548 421.227355 893.22529 530.465032 803.740903 507.243355 774.309161 398.005677 863.793548Z"
                          p-id="2111"></path>
                    <path d="M777.546323 308.983742 764.135226 344.163097 894.117161 395.429161 907.528258 360.249806 777.546323 308.983742Z"
                          p-id="2112"></path>
                    <path d="M115.513806 606.637419 246.817032 658.432 260.228129 623.252645 128.924903 571.458065 115.513806 606.637419Z"
                          p-id="2113"></path>
                    <path d="M627.612903 103.853419 604.424258 74.421677 498.654968 161.06529 521.843613 190.464 627.612903 103.853419Z"
                          p-id="2114"></path>
                    <path d="M756.934194 636.20129 778.206968 776.125935 814.905806 770.34529 793.6 630.387613 756.934194 636.20129Z"
                          p-id="2115"></path>
                </svg>
            </transition>


        </div>
    </div>

</template>

<script>

    import ArticleCardLeft from "../../components/ArticleCardLeft";
    import ArticleCardRight from "../../components/ArticleCardRight";

    export default {
        name: "ArticleList",
        components: {
            ArticleCardLeft,
            ArticleCardRight
        },
        data() {
            return {
                articleList: [],
                page: '',
                addMore: 'Add More...',
                isClick: true,
                addCircle: false
            }
        },
        beforeCreate() {
            console.log('beforeCreate');
        },
        created() {
            this.getList();
        },
        methods: {
            getList() {
                this.req({
                    method: 'POST',
                    url: '/articleList'
                }).then((res => {
                    this.$store.commit('negate');
                    this.articleList = res.data.articles;
                    this.page = res.data.page;
                    console.log('get article list success.')
                }))
                    .catch(error => {
                        this.$store.commit('negate');
                        console.log('getList() error' + error)
                    })
            },
            addList() {
                this.addCircle = true;
                // this.articleList=true;

                this.req({
                    url: 'articleList',
                    method: 'POST',
                    data: {page: this.page + 1}
                }).then((res => {
                    if (!res.data || !res.data.articles.length) {
                        this.addMore = 'No More Articles';
                        this.isClick = false;
                        this.addCircle = false;
                        return;
                    }

                    this.articleList = this.articleList.concat(res.data.articles);
                    this.page = res.data.page;
                    this.addCircle = false;
                    console.log('add article list success.')

                })).catch(error => {
                    alert('文章列表请求错误:' + error);
                    this.$store.commit('negate');
                    this.addCircle = false;
                    console.log('addList() error' + error)
                })
            },
        }
    }
</script>

<style scoped>
    .ad_circle {
        animation: clr 3s infinite;
    }

    @keyframes clr {
        from {
            transform: rotate(0);
        }
        to {
            transform: rotate(360deg);
        }

    }

    .fade-enter-active {
        transition: opacity .1s;
    }

    .fade-leave-active {
        transition: opacity .3s;
    }

    .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */
    {
        opacity: 0;
    }
</style>
